<template>
  <d2-container>
    <div class="mt-3 ml-2">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="广告名称" prop="adv_name">
          <div style="width: 50%;">
            <el-input v-model="form.adv_name"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="广告分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option v-for="item in classificationsList" :key="item.id" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告归属" prop="belong">
          <el-select v-model="form.belong" placeholder="请选择归属">
            <el-option v-for="item1 in belongList" :key="item1.value" :label="item1.name"
              :value="item1.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" prop="position">
          <el-select v-model="form.position" placeholder="请选择位置">
            <el-option v-for="item2 in positionList" :key="item2.value" :label="item2.name"
              :value="item2.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用程序" prop="application">
          <el-select v-model="form.application" placeholder="请选择位置">
            <el-option v-for="item3 in applicationList" :key="item3.value" :label="item3.name"
              :value="item3.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleadvSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.image" :src="form.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="路由地址" prop="route">
          <div style="width: 80%;">
            <el-input v-model="form.route"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="广告语" prop="describe">
          <div style="width: 80%;">
            <el-input v-model="form.describe"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <div style="width: 40%;">
            <el-input size="small" v-model="form.sort"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    classificationListUrl,
    advertisingDetailUrl,
    advertisingCreateUrl,
    advertisingUpdateUrl,
    advertisingDeleteUrl,
  } from "@/utils/picture"
  import {
    baseURL
  } from '@/utils/request'
  export default {
    data() {
      return {
        form: {
          adv_name: '',
          position: '',
          belong: '',
          application: '',
          image: '',
          route: '',
          category: '',
          describe: '',
          sort: 0
        },
        actionUrl: baseURL + imagesUploadUrl,
        rules: {
          country_name: [{
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }]
        },
        classificationsList: [],
        applicationList: [{
            value: 1,
            name: '移动端'
          },
          {
            value: 2,
            name: '网页端'
          },
        ],
        positionList: [{
            value: 1,
            name: '位置一'
          },
          {
            value: 2,
            name: '位置二'
          },
          {
            value: 3,
            name: '位置三'
          },
        ],
        belongList: [{
            value: 1,
            name: '首页'
          },
          {
            value: 2,
            name: '分类'
          },
          {
            value: 3,
            name: '购物车'
          },
          {
            value: 4,
            name: '会员中心'
          }
        ],
        getAdverId: '',
        modifyState: ''
      }
    },
    created() {
      this.initData()
    },
    mounted() {
      if (this.$route.query.adverId) {
        this.getAdverId = this.$route.query.adverId
        this.getAdvertisingsDetail()
        this.modifyState = true
      } else {
        this.modifyState = false
      }
    },
    methods: {
      initData() {
        this.getClassificationsList()
      },
      getClassificationsList() {
        this.$get(classificationListUrl, this.queryInfo).then(res => {
          this.classificationsList = res.data.data.list
          this.total = res.data.data.total
        })
      },
      getAdvertisingsDetail() {
        this.$get(advertisingDetailUrl + this.getAdverId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              adv_name: res.data.data.adv_name,
              position: res.data.data.position,
              belong: res.data.data.belong,
              application: res.data.data.application,
              image: res.data.data.image,
              route: res.data.data.route,
              category: res.data.data.category,
              describe: res.data.data.describe,
              sort: res.data.data.sort
            }
          }
        })
      },
      handleadvSuccess(val) {
        this.form.image = val.data.url
      },
      beforeAvatarUpload() {

      },
      cancel() {
        setTimeout(() => {
          this.$router.go(-1)
        }, 300) // 延迟1秒执行
      },
      // this.$message.success('添加成功')
      // 提交表单
      submitForm() {
        if (this.modifyState) {
          this.$put(advertisingUpdateUrl + this.getAdverId + '/', this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success('添加成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$post(advertisingCreateUrl, this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success('添加成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }

      },
    }
  }
</script>

<style>
  img {
    width: 100%;
    height: 100%;
  }
</style>
